<template>
  <div>
    <Frame
      class="frame"
      flexType="flex"
      size="small-2"
      title="设备详情"
      content2="content2"
      :visible="dialogVisible"
    >
      <template #default>
        <el-descriptions
          class="margin-top"
          title=""
          :column="2"
          size="medium"
          border
        >
         <!-- <el-descriptions-item>
            <template slot="label"> 探测器名称 </template>
               {{deviceList.detectorName}}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label"> 探测器型号 </template>
               {{deviceList.detectorTypeName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 探测器编码 </template>
            {{deviceList.deviceCode}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 安装点 </template>
             {{deviceList.spaceName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 摄像机 </template>
            <el-tag size="small" @click="onRelevancy" style="margin-right: 10px;">查看摄像机</el-tag>
              <el-tag size="small" @click="onUnbundle" v-if="deviceList.cameraStatus==1" >解除关联</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template #footer>
        <div class="footer-btns">
          <el-button size="small" @click="closeDialog">取消</el-button>
        </div>
      </template>
    </Frame>
  </div>
</template>

<script>
import { reqKeyCommandSend } from "@api/api.js";
import { mapState } from "vuex";
import Frame from "./frame.vue";

export default {
  props: [ "deviceList"],
  components: { Frame },
  data() {
    return {
      dialogVisible: false,
    };
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    onRelevancy(){
        this.$parent.getrelevancy()
    },
    onUnbundle(){
        this.$parent.getBinding('确定解除关联？','2')
    },
    // 点击关闭弹框
    closeDialog() {
      this.$parent.showShade = false;
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../views/common.less");
.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.footer-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.content {
  color: #fff;
  padding: 0 8vw;
}
::v-deep .el-descriptions-item__content{
    .width(240);
    background: #061F41;
    color: #D2E1FE;
    border: 1px solid #2C3D5F !important;
}
::v-deep .el-descriptions-item__label.is-bordered-label{
    background: #132D52;
    border: 1px solid #2C3D5F !important;
    color: #D2E1FE;
}
::v-deep .el-tag{
    background: linear-gradient(90deg, #2f5da3 0%, rgba(47, 93, 163, 0.35) 100%);
    box-shadow: inset 0px 3px 10px 1px rgba(47, 93, 163, 0.47);
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #658cc7;
    color: #D2E1FE;
    cursor: pointer;
}
</style>
